<template>
  <div>
    <!-- 导航开始 -->
    <van-nav-bar fixed>
        <div v-if="$store.state.islogin" slot="left" style="color:white;">
          {{$store.state.userinfo.user.nickname}}
        </div>
        <div v-else slot="left" style="color:white;">
          <span @click="toLogin">登录</span> &nbsp;
          <span @click="toRegister">注册</span>
        </div>
        <!-- <span style="color:white;" slot="left">@ 小花</span> -->
        <van-icon @click="toAdd" name="plus" slot="right" size="22" color="white" />
    </van-nav-bar>
    <!-- 导航结束 -->

    <!-- 封面开始 -->
    <div class="cover">
      <div class="circle">
        <p class="top">{{todos.length}}</p>
        <p class="bottom">待办事项</p>
      </div>
    </div>
    <!-- 封面结束 -->

    <!-- 天气情况开始 -->
    <div class="weather">
      <div class="l">
        <span class="date">2017.06.24</span>
        <span class="date">星期六</span>
      </div>
      <div class="r">
        <svg t="1622089313613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4262" width="200" height="200"><path d="M190.56 770.4a224.096 224.096 0 0 1 38.944-418.08C255.68 220.256 372.224 120.64 512 120.64c139.808 0 256.32 99.616 282.496 231.712a224.096 224.096 0 0 1 39.04 417.984l-0.064 0.032a32 32 0 0 1-27.456-57.824A160 160 0 0 0 736 408.64a224 224 0 0 0-448 0 160 160 0 0 0-68.672 304.576 32 32 0 1 1-28.8 57.184z m153.856-28.288a32 32 0 0 1 15.488 42.56l-27.04 57.984a32 32 0 1 1-58.016-27.04l27.04-58.016a32 32 0 0 1 42.56-15.488z m390.24 30.496a48 48 0 1 1-40.576 87.008 48 48 0 0 1 40.576-87.008zM497.44 723.456h75.264a32 32 0 0 1 33.024 45.28l-54.08 116a32 32 0 1 1-58.048-27.04l32.768-70.24h-79.104a32 32 0 0 1-28.64-46.4l54.08-116a32 32 0 1 1 58.016 27.04l-33.28 71.36z" fill="#333333" p-id="4263"></path></svg>
        <span class="wea">雷雨</span>
        <span class="temp">24°</span>
        <span class="wea">空气质量：优</span>
      </div>
    </div>
    <!-- 天气情况结束 -->

    <!-- 待办事项列表开始 -->
    <van-list class="item-list">
      <todo-item v-for="(item, i) in todos" :key="i" :todoItem="item" @refresh="loadMyTodos"></todo-item>
    </van-list>
    <!-- 待办事项列表结束 -->

    <!-- 登录窗口 -->
    <van-popup v-model="showLoginPanel" position="top">
      <van-nav-bar title="登录" />
      <van-form @submit="onSubmitLogin">
        <van-field
          v-model="identifier"
          name="identifier"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="credential"
          type="password"
          name="credential"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>



    <!-- 注册窗口 -->
    <van-popup v-model="showRegisterPanel" position="top">
      <van-nav-bar title="注册" />
      <van-form @submit="onSubmitRegister">
        <van-field
          v-model="identifier"
          name="identifier"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="credential"
          type="password"
          name="credential"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="nickname"
          name="nickname"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="gender"
          name="gender"
          label="性别"
          placeholder="性别"
          :rules="[{ required: true, message: '请选择性别' }]">
            <template #input>
              <van-radio-group v-model="gender" direction="horizontal">
                <van-radio name="F">男</van-radio>
                <van-radio name="M">女</van-radio>
              </van-radio-group>
            </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import TodoItem from '../components/TodoItem';
import { Toast } from 'vant';

export default {
  components:{
    'todo-item': TodoItem
  },
  data() {
    return {
      identifier: '',
      credential: '',
      gender: '',
      nickname: '',
      showLoginPanel: false,
      showRegisterPanel: false,
      todos: []
    }
  },
  methods: {
    /** 提交登录 */
    onSubmitLogin(values){
      console.log(values)
      // 发送注册请求
      this.$api.userapi.login(values).then(result=>{
        console.log(result);
        if(result.data.code==200){
          this.showLoginPanel = false;
          Toast('登录成功');
          // 完整信息存入 vuex
          this.$store.commit('loginOK', result.data.data);
          // token存入 localStorage
          localStorage.setItem('token', result.data.data.userAuth.token)
          // 加载我的待办事项列表
          this.loadMyTodos();
        }
      })
    },

    /** 提交注册 */
    onSubmitRegister(values){
      console.log(values)
      // 发送注册请求
      this.$api.userapi.register(values).then(result=>{
        console.log(result);
        if(result.data.code==200){
          this.showRegisterPanel = false;
          this.showLoginPanel = true;
          Toast('注册成功，请使用新账号登录')
        }
      })
    },

    toAdd(){
      this.$router.push('/add')
    },
    toLogin(){
      this.showLoginPanel = true;
    },
    toRegister(){
      this.showRegisterPanel = true;
    },

    /** 自动登录 */
    autoLogin(){
      let token = localStorage.getItem('token');
      if(token){
        this.$store.commit('storeToken', token);
        // 验证token 
        this.$api.userapi.verifyToken().then(result=>{
          // 完整信息存入 vuex
          this.$store.commit('loginOK', result.data.data);
          // token存入 localStorage
          localStorage.setItem('token', result.data.data.userAuth.token)
          // 加载当前待办事项列表
          this.loadMyTodos();
        })
      }
    },

    /**
     * 加载我的待办事项列表
     */
    loadMyTodos(){
      this.$api.todoapi.findMyAll().then(res=>{
        console.log(res);
        this.todos = res.data.data;
      })
    }
  },
  
  /** 生命周期方法 */
  mounted() {
    // 读取storage中的token，验证用户信息，自动登录
    this.autoLogin();
  },
}
</script>

<style scoped>
.item-list{
  background-color: #eee;
  position: fixed; top: 295px; bottom: 0px;
  left: 0px; right: 0px; overflow: scroll;
}
.weather{
  height: 45px; color: #888;
  box-shadow: 0px 1px 20px #ddd;
}
.weather .l {float: left; height: 40px;}
.weather .r {float: right; height: 40px;}

.weather .l .date{
  display: inline-block; height: 45px;
  line-height: 45px; margin-left: 10px;
  font-size: 16px; font-family: '微软雅黑';
}

.weather .r svg{
  display: inline-block; position: relative;
  top: 3px;
  width: 28px; height: 24px; margin-top: 6px;
}
.weather .r .temp{
  font-size: 24px; margin-right: 10px;
}
.weather .r .wea{
  margin-right: 10px;
  font-size: 0.8em;
}

.van-nav-bar {
  background-color: transparent;
}
.cover{
  height: 150px; background-size: cover; background-position: bottom;
  background-image: url("../assets/images/leiyu.jpg"); padding-top: 100px;
}
.cover .circle {
  width: 110px; height: 110px; border-radius: 50%;
  box-shadow: 0 0 2px 2px #b1b0b0; background-color: white;
  margin: 0px auto; border: 1px solid transparent;
}
.cover .circle .top{
  text-align: center; font-size: 40px; margin-top: 20px; margin-bottom: 10px;
}
.cover .circle .bottom{
  text-align: center;
}
[class*=van-hairline]::after{
  border: none;
}
</style>
